<template>
    <el-card class="box-card m_t_15" shadow="hover">
        <div slot="header" class="title">心理学堂</div>
        <div class="" style="padding-bottom: 20px;">
            <ul class="news_list item_flex_ul">
                <li v-for="item in list" :key="item.id" @click="startSchool(item.id)">
                    <span class="title">· {{item.name}}</span>
                </li>
            </ul>
            <!-- <div class="item" v-for="item in list" @click="startSchool(item.id)">
                <el-avatar shape="square" class="avatar square-avatar" :src="item.avatar" />
                <div class="course_body text-l">
                    <p class="title">{{item.name}}</p>
                    <p class="p_top">{{item.introduction}}</p>
                </div>
            </div> -->
        </div>
        <el-pagination @size-change="sizeChange" @current-change="pageChange" :current-page="page.page" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="page.size" :layout="PAGE_LAYOUT" :total="page.total"></el-pagination>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            page: { page: 1, size: 10, total: 4 },
            list: [
                {id: '1', name: '教你如何不被自己的情绪控制，提高幸福指数', introduction: '教你如何不被自己的情绪控制，提高幸福指数', avatar: 'https://img.ydlcdn.com/file/2019/08/15/xe3bobuxm23d6532.jpg!s300x'},
                {id: '2', name: '怎样调节焦虑情绪，不用再纠结', introduction: '怎样调节焦虑情绪，不用再纠结', avatar: 'https://img.ydlcdn.com/file/2019/09/17/loc9fhjobggep8jh.jpg!s300x'},
                {id: '3', name: '壹点灵中级咨询师班', introduction: '壹点灵中级咨询师班', avatar: 'https://img.ydlcdn.com/file/2018/02/09/543laxab4cc3dx6o.jpg!s300x'},
                {id: '4', name: '帮助孩子养成学习好习惯，陪写作业不抓狂', introduction: '帮助孩子养成学习好习惯，陪写作业不抓狂', avatar: 'https://img.ydlcdn.com/file/2019/05/08/viv4d8liyh082jvq.jpg!s300x'},
            ],
        };
    },
    created() {},
    mounted(){
        
    },
    methods: {
        sizeChange() {},
        pageChange() {},
        startSchool(id){
            this.$router.push({ path: '/LearningHome/Psychological/startSchool', query: { id } });
        },
    }
};
</script>

<style>
</style>